<template>
    <div class="page-container">
        <h1 class="page-title">联系我们</h1>

        <div class="content-wrapper">
            <el-card class="contact-card" shadow="hover">
                <div class="contact-info">
                    <div class="info-item">
                        <div class="icon-container">
                            <el-icon><Location /></el-icon>
                        </div>
                        <div class="info-content">
                            <h3>地址</h3>
                            <p>北京市海淀区中关村南大街5号</p>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="icon-container">
                            <el-icon><Phone /></el-icon>
                        </div>
                        <div class="info-content">
                            <h3>咨询热线</h3>
                            <p>400-123-4567</p>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="icon-container">
                            <el-icon><Message /></el-icon>
                        </div>
                        <div class="info-content">
                            <h3>邮箱</h3>
                            <p>contact@psychological-health.com</p>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="icon-container">
                            <el-icon><Clock /></el-icon>
                        </div>
                        <div class="info-content">
                            <h3>工作时间</h3>
                            <p>周一至周五: 9:00 - 18:00</p>
                            <p>周六: 10:00 - 16:00</p>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-card class="message-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h2>在线留言</h2>
                    </div>
                </template>

                <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-width="80px"
                    class="message-form"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-input
                            v-model="form.name"
                            placeholder="请输入您的姓名"
                        />
                    </el-form-item>

                    <el-form-item label="联系方式" prop="contact">
                        <el-input
                            v-model="form.contact"
                            placeholder="请输入您的手机号或邮箱"
                        />
                    </el-form-item>

                    <el-form-item label="留言主题" prop="subject">
                        <el-select
                            v-model="form.subject"
                            placeholder="请选择留言主题"
                            style="width: 100%"
                        >
                            <el-option label="咨询服务" value="service" />
                            <el-option label="投诉建议" value="suggestion" />
                            <el-option label="合作洽谈" value="cooperation" />
                            <el-option label="其他" value="other" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="留言内容" prop="message">
                        <el-input
                            v-model="form.message"
                            type="textarea"
                            :rows="5"
                            placeholder="请输入您的留言内容"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="submitForm"
                            :loading="loading"
                            >提交留言</el-button
                        >
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="map-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h2>我们的位置</h2>
                    </div>
                </template>

                <div class="map-container">
                    <!-- 这里放置地图组件，可以使用百度地图或高德地图API -->
                    <div class="map-placeholder">
                        <el-icon><Location /></el-icon>
                        <p>地图加载中...</p>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Location, Phone, Message, Clock } from '@element-plus/icons-vue'

const formRef = ref(null)
const loading = ref(false)

// 表单数据
const form = reactive({
    name: '',
    contact: '',
    subject: '',
    message: ''
})

// 表单验证规则
const rules = {
    name: [
        { required: true, message: '请输入您的姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    contact: [
        { required: true, message: '请输入您的联系方式', trigger: 'blur' }
    ],
    subject: [{ required: true, message: '请选择留言主题', trigger: 'change' }],
    message: [
        { required: true, message: '请输入留言内容', trigger: 'blur' },
        {
            min: 10,
            max: 500,
            message: '长度在 10 到 500 个字符',
            trigger: 'blur'
        }
    ]
}

// 提交表单
const submitForm = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true

            try {
                // 模拟API调用
                setTimeout(() => {
                    ElMessage.success('留言已提交，我们会尽快与您联系')
                    resetForm()
                    loading.value = false
                }, 1000)
            } catch (error) {
                console.error('提交留言失败', error)
                ElMessage.error('提交失败，请重试')
                loading.value = false
            }
        }
    })
}

// 重置表单
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}
</script>

<style scoped>
.page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-card {
    grid-column: 1 / -1;
}

.card-header h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* 联系信息样式 */
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
}

.icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.icon-container .el-icon {
    font-size: 24px;
    color: #4086f4;
}

.info-content h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.info-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* 留言表单样式 */
.message-form {
    margin-top: 10px;
}

/* 地图样式 */
.map-container {
    height: 300px;
    background: #f5f7fa;
    border-radius: 4px;
    overflow: hidden;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.map-placeholder .el-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }
}
</style>
